<script lang="ts" setup>
  import appStore from '@/store'
  import autoScaling from '@/api/autoScaling'
  import { reactive, ref } from 'vue'
  import { useRouter } from 'vue-router'
  import MeDialog from './dialog/index.vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  const router = useRouter()
  const param = reactive({
    project_id: appStore.userStore.project_id,
    offset: 1,
    limit: 10,
    url: '',
    policy_id: ''
  })
  let userType = ref()
  userType.value = localStorage.getItem('UserType') as string
  interface optionList {
    value: string
    label: string
  }
  const fleetOptions: optionList[] = reactive([])

  interface apiData {
    name?: string
    client_session_creating_policy?: string
    created_time?: string
    creator_id?: string
    current_client_session_count?: number
    fleet_id?: string
    instance_id?: string
    ip_address?: string
    max_client_session_num?: number
    port?: number
    process_id?: string
    server_session_id?: string
    server_session_protection_policy?: string
    server_session_protection_time_limit_minutes?: number
    session_data?: string
    session_properties?: Array<object>
    state?: string
    state_reason?: string
    updated_time?: string
    bandwidth?: number
    build_id?: string
    creation_time?: string
    description?: string
    enable_auto_scaling?: boolean
    instance_specification?: string
    operating_system?: string
    region?: string
    resource_creation_limit_policy?: object
    scaling_interval_minutes?: number
  }
  let tableData: apiData[] = reactive([])
  let tableTotal = ref(0)
  const getOtherList = async () => {
    let res = await autoScaling.getAutoScalingList(param)
    tableTotal.value = res.data.total_count
    tableData.length = 0
    tableData.push(...res.data.scaling_policies)
  }

  const buildAutoScaling = () => {
    router.push({
      name: 'createAutoScaling'
    })
  }
  const small = ref(false)
  const disabled = ref(false)
  const background = ref(true)
  const handleSizeChange = (val: number) => {
    param.limit = val
    param.offset = 1
    getOtherList()
  }
  const handleCurrentChange = (val: number) => {
    param.offset = val
    getOtherList()
  }
  const showDetails = (id: any) => {
    router.push({
      name: 'autoScalingDetails',
      params: {
        id
      }
    })
  }
  const deleteAs = (policy_id: any, name: any) => {
    ElMessageBox.confirm(`确认删除此条数据？\n名称: ${name}\nID: ${policy_id} `, '警告', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(async () => {
        param.policy_id = policy_id
        let res = await autoScaling.deleteAutoScaling(param)
        if (res.status < 300) {
          ElMessage({
            type: 'success',
            message: '删除成功'
          })
          getOtherList()
        } else {
          ElMessage({
            type: 'info',
            message: '删除失败'
          })
        }
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除'
        })
      })
  }

  getOtherList()
</script>
<template>
  <div id="autoScaling" class="list-index">
    <div class="run-box">
      <div class="state-box">
        <div class="run-label">伸缩策略管理</div>
      </div>
    </div>
    <div class="auto-box">
      <div class="auto-btn">
        <button class="btn new" @click="buildAutoScaling" v-if="userType >= 5">新建伸缩策略</button>
      </div>
    </div>
    <div class="table-box">
      <el-table :data="tableData" style="width: 100%" :header-cell-style="{ background: '#fafafe', color: '#1d1d1f' }" :border="true">
        <el-table-column label="名称/ID" class-name="elcell" width="260">
          <template #default="scope">
            <div class="toDetails" @click="showDetails(scope.row.policy_id)">
              {{ scope.row.name }}
            </div>
            <el-tooltip effect="dark" :content="scope.row.policy_id" placement="bottom">
              <div class="id-box">
                {{ scope.row.policy_id }}
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="策略类型">
          <template #default="scope">
            {{ scope.row.policy_type ? $t(scope.row.policy_type) : '' }}
          </template>
        </el-table-column>
        <el-table-column label="指标名称">
          <template #default="scope">
            {{ scope.row.target_based_configuration.metric_name ? $t(scope.row.target_based_configuration.metric_name) : '' }}
          </template>
        </el-table-column>
        <el-table-column prop="target_based_configuration.min_target_value" label="最小目标可用会话比(%)" />
        <el-table-column prop="target_based_configuration.max_target_value" label="最大目标可用会话比(%)" />
        <el-table-column label="状态">
          <template #default="scope">
            {{ scope.row.state ? $t(scope.row.state) : '' }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
          <template #default="scope">
            <div class="actions-box">
              <div class="actions-details" @click="showDetails(scope.row.policy_id)">详情</div>
              <div class="line" v-if="userType >= 5"></div>
              <div class="actions-delete" @click="deleteAs(scope.row.policy_id, scope.row.name)" v-if="userType >= 5">删除</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="param.offset"
        v-model:page-size="param.limit"
        :page-sizes="[10, 20, 50, 100]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>
<style lang="scss" scoped>
  @import '@/assets/scss/list.scss';
  @import '@/assets/scss/dropdownBox.scss';
  #autoScaling {
    .auto-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 28px;
      margin-bottom: 20px;
      .run-select {
        width: 160px;
        margin-right: 20px;
      }
      .auto-btn {
        .btn {
          width: 130px;
          height: 28px;
        }
      }
    }
    .fleet {
      width: 160px;
    }
  }
</style>
